import { PageProps } from "@/interfaces/app.interface"
import React, { useEffect, useCallback, useState, useRef } from "react"
import Head from '../components/head'
import Foot from '../components/foot'
import { Pagination } from 'antd';
import style from "./index.less"
import { getNew, getMenu, getDefault } from '@/api'
import { prefix } from '@/utils/constant'
const arr = Array.from({ length: 5 })
const newsPage = (props: PageProps) => {

    let [news, setNew] = useState([])
    let [total, setTotal] = useState(0)
    let [current, setCurrent] = useState(1)
    let [per, setPer] = useState([])
    let [show, setShow] = useState(true)
    let [nav, setNav] = useState(3)
    let exhibitionId = props.location.query.i as string 
    let suffix = ''
    if (exhibitionId) {
        suffix = '?i=' + exhibitionId
    }
    const link = (id: string) => () => {
        if (suffix) {
            suffix += '&id=' + id
        } else {
            suffix = '?id=' + id
        }
        props.history.push(`/news/detail.html${suffix}`)
    }

    const home = () => {
        props.history.push(`/index.html${suffix}`)
    }

    const change = (page: number) => {
        setCurrent(page)
    }

    const getData = useCallback(
        (exhibitionId) => {
            getMenu({ exhibitionId }).then(res => {
                let nav = 0
                if (res[7].isDel == 0) nav++
                if (res[4].isDel == 0) nav++
                if (res[5].isDel === 0) {
                    nav++
                    setNav(nav)
                    setPer(res)
                    setShow(false)
                    getNew({ exhibitionId }).then(res => {
                        console.log(res)
                        setTotal(res.count)
                        setNew(res.entities)
                    })
                }
            })
        },
        [],
    )
    
    useEffect(() => {
        if (exhibitionId) {
            getData(exhibitionId)
        } else {
            getDefault().then(getData)
        }
    }, [])

    return show ? null : <>
        <Head status={nav} per={per} id={exhibitionId}/>
        <div className={style.banner}>
            <img src={require('@/assets/img/ban.png')} alt="" />
            <div>新闻资讯</div>
        </div>
        <div className={style.nav}>
            <div className="wrap flex-start">
                <div onClick={home} className={style.cur}>首页</div>
                <span> &gt; </span>
                <div className={style.on}>新闻资讯</div>
            </div>
        </div>

        <div className={`wrap ${style.news}`}>
            {news.map((item, index) => <div key={index} className={`flex ${style.item}`} onClick={link(item.id)}>
                <div className={`flex-center ${style.img}`}>
                    <img src={prefix + item.image} alt="" />
                </div>
                <div className={style.info}>
                    <div className={style.name}>{item.title}</div>
                    <div className={style.time}>{item.publishTime.slice(0, 10)}</div>
                    <div className={style.detail} >{item.introduction}</div>
                </div>
            </div>)}

            <div className="page">
                <Pagination hideOnSinglePage showSizeChanger={false} current={current} total={total} onChange={change} />
            </div>

        </div>
        <Foot />
    </>

}


export default newsPage



